<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车结算</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <style>
        .mainbox {
            width: 50%;
            margin: 0 auto;
        }

        .form-label {
            text-align: left;
            margin: 10px;
        }
    </style>


    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
<div class="mainbox">
    <h1 style="text-align: center;margin: 30px">您即将购买的商品如下</h1>
    <table class="table">
        <tbody>
        <tr>
            <th>id</th>
            <th>价格</th>
            <th>标题</th>
            <th>数量</th>
        </tr>
        {% for item in items %}
            <tr>
                <td>
                    {{ item.id }}
                </td>
                <td>
                    {{ item.price }}
                </td>
                <td>
                    {{ item.title }}
                </td>
                <td>
                    {{ item.buy_count }}
                </td>
            </tr>
        {% endfor %}


        </tbody>
    </table>
    {#    <h1>支付成功！亲，请您填写您的收货信息</h1>#}
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">请填写您的收获地址：</label>
        <input type="address" class="form-control" id="address" placeholder="例：江西省XX市XX区">
        <label for="exampleFormControlInput1" class="form-label">请填写收货人姓名：</label>
        <input type="name" class="form-control" id="name" placeholder="例：张三">
        <label for="exampleFormControlInput1" class="form-label">电话号码：</label>
        <input type="phone" class="form-control" id="phone" placeholder="例：18312345678">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">备注信息：</label>
        <textarea class="form-control" id="ps" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary" style="margin-top: 30px;margin-left: 243px;width: 300px"
            onclick="postData()">提交信息
    </button>

</div>
<script>
    
    function postData(){
        let addr = $('#address').val();
        let realname = $('#name').val();
        let realphone = $('#phone').val();
        let ps = $('#ps').val();
        if (addr && realname && realphone.length == 11){
            
            $.post("./save",
            JSON.stringify(
                {
                    address: addr,
                    name: realname,
                    phone: realphone,
                    beizhu: ps,
                    shops: [
                        {% for item in items %}
                            {
                                id: {{ item.id }},
                                count: {{ item.buy_count }}
                            },
                        {% endfor %}
                    ]
                }
            )
                ,

            );
            alert("购买成功");
            window.location.href = '/';

        }else {
            alert('请填写完整信息')
        }

    }
</script>

</body>

</html>